<template>
    <div class="commodity">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>商品列表数据</span>
                <el-button style="float: right; padding: 3px 0" type="text">添加商品</el-button>
            </div>
            <!-- 搜索 -->
            <div class="condition_box">
                <el-input placeholder="请输入商品名称模糊搜索" v-model="keywords" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
            <!-- 表格 -->
            <el-table border height="400" stripe :data="goods" style="width: 100%">
                <el-table-column prop="goods_id" label="编号"></el-table-column>
                <el-table-column prop="goods_name" label="名称"></el-table-column>
                <el-table-column prop="goods_price" label="价格"></el-table-column>
                <el-table-column prop="goods_number" label="数量"></el-table-column>
                <el-table-column prop="goods_weight" label="重量"></el-table-column>
                <el-table-column label="状态">
                    <el-switch v-model="goods_state" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-table-column>
                <el-table-column label="添加时间">
                    <template slot-scope="scope">
                        <!-- 如果在自定义的内容里面，想要用当前对象的值，就必须在外面包一层template -->
                        <span>{{ scope.row.add_time | formate_date }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="更新时间">
                    <template slot-scope="scope">
                        <!-- 如果在自定义的内容里面，想要用当前对象的值，就必须在外面包一层template -->
                        <span>{{ scope.row.upd_time | formate_date }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="hot_mumber" label="热销品数量" width="50"></el-table-column>
                <el-table-column prop="is_promote" label="是否是热销品"></el-table-column>
                <el-table-column label="操作">
                    <el-button size="mini" type="success">编辑</el-button>
                    <el-button size="mini" type="danger">删除</el-button>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
                :page-sizes="[5, 10, 15]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: true,
            goods: [
                {
                    "goods_id": 144,
                    "goods_name": "asfdsd",
                    "goods_price": 1,
                    "goods_number": 1,
                    "goods_weight": 1,
                    "goods_state": null,
                    "add_time": 1512954923,
                    "upd_time": 1512954923,
                    "hot_mumber": 0,
                    "is_promote": false
                }
            ],
            pagenum: 1,
            pagesize: 10,
            keywords: ''
        };
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    filters: {
        formate_date(_val) {
            if (_val) {
                let date = new Date(_val);
                return `${date.getFullYear()}-${date.getMonth() + 1
                    }-${date.getDay()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.commodity {
    .condition_box {
        width: 330px;
        margin-bottom: 15px;
    }

    .el-pagination {
        margin-top: 15px;
    }
}
</style>
